<!-- Records.vue -->
<template>
    <div class="records">
      <!-- 顶部筛选条件 -->
      <van-tabs v-model:active="activeTab" @change="onTabChange" sticky swipeable>
        <van-tab v-for="tab in tabs" :key="tab.value" :title="tab.label" :name="tab.value">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                :error="error"
                error-text="请求失败，点击重试"
                @load="onLoad"
            >
              <!-- 记录列表 -->
              <div v-if="records.length > 0" class="record-list">
                <van-cell-group
                    v-for="record in records"
                    :key="record.id"
                    class="record-item"
                    @click="goToDetail(record.id)"
                >
                  <van-cell>
                    <!-- 头部信息 -->
                    <template #title>
                      <div class="record-header">
                        <span class="point-name">{{ record.pointName }}</span>
                        <van-tag :type="getStatusType(record.processStatus)">
                          {{ getStatusText(record.processStatus) }}
                        </van-tag>
                      </div>
                    </template>
  
                    <!-- 标签信息 -->
                    <template #label>
                      <div class="record-info">
                        <div class="info-row check-result">
                        <span>检查结果：
                          <van-tag :type="getCheckResultType(record.checkResult)">
                            {{ getCheckResultText(record.checkResult) }}
                          </van-tag>
                        </span>
                        </div>
                        <div class="info-row">
                          <span>检查人: {{ record.inspectorName }}</span>
                          <span>时间: {{ formatTime(record.createdTime) }}</span>
                        </div>
                      </div>
                    </template>
                  </van-cell>
                </van-cell-group>
              </div>
  
              <!-- 空状态 -->
              <van-empty v-else-if="!loading" description="暂无记录" />
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, inject } from 'vue'
  import { useRouter } from 'vue-router'
  import { getRecords } from "@/api/common"
  import { Tag as VanTag } from "vant"

  const router = useRouter()
  const pageSize = 20
  
  // 状态定义
  const tabs = [
    { label: '全部', value: 'ALL' },
    { label: '待处理', value: 'PENDING' },
    { label: '处理完成', value: 'COMPLETED' },
    { label: '无需处理', value: 'NO_NEED' }
  ]
  
  // 列表相关状态
  const toast = inject('toast')
  const activeTab = ref('ALL')
  const records = ref([])
  const loading = ref(false)
  const finished = ref(false)
  const refreshing = ref(false)
  const error = ref(false)
  const currentPage = ref(0)
  
  // 获取记录列表
  function fetchRecords() {
    const params = {
      page: currentPage.value,
      size: pageSize,
      processStatus: activeTab.value === 'ALL' ? undefined : activeTab.value
    }
    getRecords(params).then(res => {
      const newRecords = res.content || []
      if (refreshing.value) {
        records.value = newRecords
        refreshing.value = false
      } else {
        records.value = [...records.value, ...newRecords]
      }

      loading.value = false
      error.value = false
      finished.value = newRecords.length < pageSize
      currentPage.value++
    }, err => {
      loading.value = false
      error.value = true
      toast.msg(err.message)
    })
  }
  
  // 列表加载更多
  const onLoad = () => {
    if (!finished.value) {
      loading.value = true
      fetchRecords()
    }
  }
  
  // 下拉刷新
  const onRefresh = () => {
    finished.value = false
    error.value = false
    currentPage.value = 0
    fetchRecords()
  }
  
  // 标签页切换
  const onTabChange = () => {
    records.value = []
    currentPage.value = 0
    finished.value = false
    loading.value = true
    fetchRecords()
  }
  
  // 跳转详情页
  const goToDetail = async (id) => {
    try {
      await router.push(`/dayRecordDetail?id=${id}`)
    } catch (error) {
    }
  }
  
  // 初始化加载
  onMounted(() => {
    loading.value = true
  })
  
  // 工具函数
  const formatTime = (time) => {
    if (!time) return ''
    const date = new Date(time)
    return date.toLocaleString('zh-CN', {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
  
  const getStatusType = (status) => {
    const types = {
      'PENDING': 'warning',
      'COMPLETED': 'success',
      'NO_NEED': 'primary'
    }
    return types[status] || 'default'
  }
  
  const getStatusText = (status) => {
    const texts = {
      'PENDING': '待处理',
      'COMPLETED': '已处理',
      'NO_NEED': '无需处理'
    }
    return texts[status] || '未知状态'
  }
  
  const getCheckResultType = (result) => {
    return result === 'NORMAL' ? 'success' : 'danger'
  }
  
  const getCheckResultText = (result) => {
    return result === 'NORMAL' ? '正常' : '异常'
  }
  </script>
  
  <style scoped>
  .records {
    min-height: 100vh;
    background-color: #f7f8fa;
  }
  
  .record-list {
    padding: 12px;
  }
  
  .record-item {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .point-name {
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    flex: 1;
  }
  
  .record-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #646566;
  }
  
  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .check-result {
    margin-bottom: 4px;
  }
  
  :deep(.van-cell) {
    padding: 16px;
    line-height: 1.5;
  }
  
  :deep(.van-cell) {
    padding: 16px;
    line-height: 1.5;
  }
  
  :deep(.van-tag) {
    margin-left: 8px;
  }
  </style>